輸出完 header 元件後，試著在 App.vue 引入 TaiHeader.vue。
App.vue*

<template>
 <div id="app">
   <tai-header></tai-header>
 </div>
</template>

<script>
// @ is an alias to /src
import TaiHeader from '@/components/TaiHeader.vue';

export default {
 components: {
   TaiHeader,
 }
}
</script>

• import: 先從 TaiHeader.vue 引入 header 元件
• export: 目前輸出的有 header 元件

需要注意 template 引入的元件要以小寫作為 tag 名稱，中間以連接號相連。還有可能出現的錯誤訊息是 tag 沒有正確結尾，整個網頁翻遍了原來是不小心出現兩次</div>。

19:15 error Parsing error: end-tag-with-attributes vue/no-parsing-error
48:5 error Parsing error: x-invalid-end-tag vue/no-parsing-error
50:3 error Parsing error: x-invalid-end-tag

</div class="home">
   <tai-header></tai-header>
</div>

這時候馬上搜尋 Visual studio code plugins，找到套件 auto close tag ，輸入 tag 時可以自動產生結尾符號！

實際建立元件到輸出到畫面，對 Vue 架構的瞭解是:

1.建立單一元件檔(Single File Components, SFC) ➡️ 多個元件組成各個 View
2.建立、輸出、引入，將各個元件拆分開來，不僅是重複利用，切分開來的元件在維護時更容易找到問題所在。

資料來源：
https://www.jianshu.com/p/d5eec7c90b43
https://blog.goodjack.tw/2018/03/visual-studio-code-extensions.html